<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>

    <title>小节列表</title>

    <link th:href="@{/css/webchapter.css}" rel="stylesheet"/>
    <style type="text/css">
        #head {
            height: 120px;
            width: 100%;
            background-color: #66CCCC;
            text-align: center;
            position: relative;
        }

        .title {
            font-family: "����";
            color: #FFFFFF;
            position: inherit;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 36px;
            height: 40px;
            width: 30%;
        }

        .ls-sec-body {
            margin: 0 39px;
        }

        .ls-sec-body .img-ul {
            margin-right: -30px;
            overflow: hidden;
            margin-left: 25%;
        }

        .ls-sec-body .img-ul .img-li {
            list-style: none
        }

        .ls-sec-body .img-ul .img1 {
            height: 140px;
            width: 200px;
            border-radius: 20px
        }

        .ls-sec-body .img-ul .p1 {
            color: #33b5d5;
            font-size: 14px;
            line-height: 24px;
            margin-top: 10px;
        }

        #foot .copyright p {
            height: 24px;
            width: 100%;
        }

        #foot {
            width: 100%;
            height: 126px;
            background-color: #CC9933;
            position: relative;
            overflow: hidden
        }

        .copyright {
            font-family: "����";
            color: #FFFFFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* ʹ��css3��transform��ʵ�� */
            height: 60px;
            width: 40%;
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        #addV {
            text-align: center;
        }

        #container {
            margin: 0 auto;
        }
    </style>

</head>
<body>
<div class="header" id="head">
    <div class="title">大数据学习系统</div>
    <span style="float: right;margin-right: 67px;">
        <ul style="width: 400px;">
            <li style="width: 30px; height: 30px;display: inline-block;"><img
                    style="width: 100%; height: 100%;border-radius: 10px;"
                    th:src="(${session.user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${session.user.avatar}"></li>
            <li style="width: 110px; height: 30px;display: inline-block;"
                th:text="'欢迎您，'+${session.user.userName}"></li>
            <li style="width: 50px; height: 30px;display: inline-block;"><a href="/web/toExamList"
                                                                            style="text-decoration: none;">去考试</a></li>
            <li style="width: 100px; height: 30px;display: inline-block;"><a href="logout"
                                                                             style="text-decoration: none;">退出</a></li>
        </ul>
    </span>
</div>

<div id="addV">
    <div id="container" class="container">
        <video id="videomp4" width="700" height="400">
        </video>
    </div>
</div>
<p id="playedName" style="color: #1a7bb9;" align="center"></p>
<div class="ls-sec-body" style="clear:both">
    <ul class="img-ul">
    </ul>
</div>
<div class="footer" id="foot">
    <div class="copyright">
        <div class="img">
            <span>联系邮箱：XXXXX@163.com</span>
        </div>

        <div class="img">
            <span>联系地址：XXXXXXXXXX</span>
        </div>

        <div class="img">
            <span>联系电话：XXXXXXXXXXXXXXXX</span>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jwplayer.js}"></script>

<script type='text/javascript'>
    var ctx = "/";
    /*$(document).ready(function() {
     $('video').videoPlayer({
     'playerWidth' : 0.95,
     'videoClass' : 'video'
     });
     });*/
    //获取小节数据
    $(function () {
        var id = [[${courseId}]];
        $.post(ctx + "web/chapterList/" + id, {}, function (data) {
            var datas = data.rows;
            var res = "";
            for (var i = 0; i < datas.length; i++) {
                var chapterId = datas[i].chapterId;
                var chapterName = datas[i].chapterName;
                var videoUrl = datas[i].videoUrl;
                if (0 == i) {
                    lookChapter(videoUrl, chapterName);
                    $("#playedName").html("正在播放：" + chapterName);
                    //$("#videomp4").attr("src", videoUrl);
                    //document.getElementById("videomp4").play();
                }
                var createTime = datas[i].createTime;
                res += "<li class=\"img-li\">" +
                    "<a onclick=\"lookChapter('" + videoUrl + "','" + chapterName + "')\" href=\"javascript:void(0)\">" +
                    "<p class=\"p1 p-a666\">第" + (i + 1) + "节：" + chapterName + "</p>" +
                    "</a>" +
                    "</li>";
            }
            $(".img-ul").html(res);
        });
    });
    var thePlayer;
    function lookChapter(url, name) {
        var tag = '.avi';
        var tag1 = '.wmv';
        if (url.indexOf(tag) != -1 || url.indexOf(tag1) != -1) {
            $('.pages_cover').show();
            return;
        }
        thePlayer = jwplayer('container').setup({
            flashplayer: 'jwplayer.flash.swf',
            width: 820,
            file: url,
            height: 414,
            autostart: false,
            dock: false,
        });
        $("#playedName").html("正在播放：" + name);
    }
</script>
</body>
</html>